import { getSchedule, findList, submitOrder } from '../../../api';
import { useState, useEffect } from 'react';
import { useParams, useNavigate } from 'react-router-dom';
import { Spin, Tabs, Space, Row, Col, Divider, Card, Tag, Button } from 'antd';
import { InfoCircleOutlined, PlusOutlined } from '@ant-design/icons';
import './index.css';
const Booking = () => {
  const navigate = useNavigate();
  const [patientList, setPatientList] = useState([]);
  const [schedule, setSchedule] = useState({});
  const [patient, setPatient] = useState({});
  const { id } = useParams();
  const [loading, setLoading] = useState(false);

  useEffect(async () => {
    await setLoading(true);
    const scheduleData = await getSchedule(id);
    setSchedule(scheduleData);
    const patientListData = await findList();
    await setPatientList(patientListData);
    await setPatient(patientListData[0]);
    await setLoading(false);
  }, []);

  const gotoPatientUpdate = () => {
    navigate('/user/patientUpdate');
  };

  const changePatient = (_) => {
    setPatient(_);
  };

  const onSubmitOrder = async () => {
    await setLoading(true);
    const resultId = await submitOrder(schedule.hoscode, id, patient.id);
    await setLoading(false);
    navigate(`/user/orderDetail/${resultId}`);
  };

  return (
    <div className='m-l-30 m-r-30'>
      <h2 className='m-b-10'>确认挂号信息</h2>
      <Divider orientation='left' orientationMargin plain>
        选择就诊人
      </Divider>

      {loading ? (
        <Spin />
      ) : (
        <>
          <Row gutter={16}>
            {patientList.map((_) => {
              return (
                <Col span={4} key={_.id}>
                  <Card
                    title={<span style={{ color: 'gray' }}>{_.name}</span>}
                    onClick={() => changePatient(_)}
                    className={patient.id === _.id && 'active'}
                  >
                    <Space direction='vertical'>
                      <div>{_.param.certificatesTypeString}</div>
                      <div>{_.certificatesNo}</div>
                    </Space>
                  </Card>
                </Col>
              );
            })}
            <Col span={4}>
              <Card
                title={<span style={{ color: 'gray' }}>添加就诊人</span>}
                onClick={gotoPatientUpdate}
              >
                <center>
                  <Space direction='vertical'>
                    <div>
                      <PlusOutlined />
                    </div>
                    <div>添加就诊人</div>
                  </Space>
                </center>
              </Card>
            </Col>
          </Row>

          {patient.id && (
            <Row gutter={16} className='m-b-30'>
              <Col span={12}>
                <Divider orientation='left' orientationMargin plain>
                  选择就诊卡
                </Divider>
                <Card
                  title={<span style={{ color: 'gray' }}>{patient.name}</span>}
                >
                  <Space direction='vertical'>
                    <div>
                      <Tag>{patient.isInsure == 0 ? '自费' : '医保'}</Tag>{' '}
                      {patient.param.certificatesTypeString}：
                      {patient.certificatesNo}
                    </div>

                    <div>联系电话：{patient.phone}</div>
                  </Space>
                </Card>

                <div style={{ color: 'red' }} className='m-l-10 m-t-10 m-b-10'>
                  <InfoCircleOutlined className='m-r-5' />
                  如您持社保卡就诊，请务必选择医保预约挂号，以保证正常医保报销
                </div>
              </Col>
              <Col span={12}>
                <Divider orientation='left' orientationMargin plain>
                  挂号信息
                </Divider>

                <Card>
                  <Space direction='vertical'>
                    <div>
                      就诊日期：{schedule.workDate} {schedule.param.dayOfWeek}
                      {schedule.workTime == 0 ? '上午' : '下午'}
                    </div>
                    <div>就诊医院：{schedule.param.hosname}</div>
                    <div>就诊科室：{schedule.param.depname}</div>
                    <div>医生姓名：{schedule.docname}</div>
                    <div>医生职称：{schedule.title}</div>
                    <div>医生专长：{schedule.skill}</div>
                    <div>医事服务费：{schedule.amount}元</div>
                  </Space>
                </Card>
              </Col>
            </Row>
          )}

          <center className='m-b-30'>
            <Button type='primary' size='large' onClick={onSubmitOrder}>
              <span style={{ color: 'white' }}>确认挂号</span>
            </Button>
          </center>
        </>
      )}
    </div>
  );
};

export default Booking;
